<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = defineProps<{
  text: string;
  speed?: number;
}>();

const displayText = ref('');
const currentIndex = ref(0);

const typeText = () => {
  if (currentIndex.value < props.text.length) {
    displayText.value += props.text[currentIndex.value];
    currentIndex.value++;
    setTimeout(typeText, props.speed || 100);
  } else {
    setTimeout(() => {
      currentIndex.value = 0;
      displayText.value = '';
      typeText();
    }, props.speed || 8000);
  }
};

onMounted(() => {
  typeText();
});
</script>

<template>
  <span class="typewriter">{{ displayText }}<span class="cursor">|</span></span>
</template>

<style scoped>
.typewriter {
  font-family: monospace;
  font-weight: 700;
  font-size: 1.6em;
  display: inline-block;
  padding: 10px 16px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

.cursor {
  animation: blink 1.7s infinite;
  font-weight: bold;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
</style> 